<template>
    <div class="box">
        <JsContentTitle :pageTitle="state.pageTitle" :buttonData="state.buttonData"></JsContentTitle>
        <div class="contentView">
            <JsTable :toolBar="toolBar" :total="state.totalCount" :dataSource="state.dataSource"
                :columns="state.columns" :refresh="state.refresh" @search="search">
            </JsTable>
        </div>
    </div>
</template>
<script setup lang="ts">
import { getRecord, returnBook } from '@/api/login'




const search = (params: any) => {
    getRecord(params).then((res: any) => {
        state.value.dataSource = res.data.data
        state.value.totalCount = res.data.total
    })
    state.value.refresh = 0
}
onMounted(() => {
    state.value.refresh = 1
})

const returnbook = (row: any) => {
    returnBook(Number(row.book_id)).then(() => {
        state.value.refresh = 1

    })
}


const state = ref({
    buttonData: [],
    refresh: 0,
    totalCount: 0,
    pageTitle: '归还书籍',
    columns: {
        props: [

            {
                name: "书名",
                key: "book_name",
            },
            {
                name: "作者",
                key: "author",
            },

            {
                name: "出版时间",
                key: "year_publication",
            },
            {
                name: "借阅时间",
                key: "borrow_at",
            },
            {
                name: "简介",
                key: "synopsis",
            },
        ],

        options: {
            width: 'auto',
            btns: [
                {
                    label: '还书',
                    key: 'edit',
                    type: 'warning',
                    event: returnbook
                },
            ],
        },
    },
    dataSource: [],

} as any)

const toolBar = ref<any>({
    form: {
        username: '',
    },
    // input: [
    //     {
    //         label: '输入框',
    //         key: 'username',
    //         placeholder: '请输入',
    //         el: 'input',
    //     },
    // ],
    // btns: [
    //     {
    //         label: '查询',
    //         icon: 'Search',
    //     },
    //     {
    //         label: '重置',
    //         event: () => {
    //             Object.keys(toolBar.value.form).forEach((key: string) => {
    //                 toolBar.value.form[key] = ''
    //             })
    //         },
    //     },
    // ],
})
</script>

<style lang="scss" scoped>
*::-webkit-scrollbar {
    display: none;
    width: 10px;
}

.box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;

    .contentView {
        background-color: white;
        border-radius: 5px;
        height: calc(100vh - 144px);
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
</style>